"use client"
import {useSearchParams} from "next/navigation";
import Link from "next/link";
import {FiChevronRight} from "react-icons/fi";
import Image from "next/image";
import {useEffect, useState} from "react";
import {Divider} from "@nextui-org/divider";
import {TiInputChecked} from "react-icons/ti";
import clsx from "clsx";


const product = {
    id: 1,
    code: '192379263972973',
    title: '【75天预约申购】HUAWEI Mate 60 Pro 12GB+1TB 南糯紫',
    description: <p><Link href={'#'} className={"text-red-700 underline"}>【预约申购说明】成功预约申购后，您可能需要等待一段时间才能收到商品
        | 点击前往了解预约申购规则说明{">"}{">"}</Link>卫星通话，超可靠玄武架构，全焦段超清影像</p>,
    skus: [
        {
            title: '12GB+256GB',
            price: '6499',
            stock: 1
        }, {
            title: '12GB+512GB',
            price: '6999',
            stock: 0,
        },
        {
            title: '12GB+1TB',
            price: '7999',
            stock: 3
        }
    ],
    colors: [
        {
            cover: '/images/product/detail/green.webp',
            label: '雅川青',
            stock: 3
        }, {
            cover: '/images/product/detail/puper.webp',
            label: '南糯紫',
            stock: 3
        }, {
            cover: '/images/product/detail/blank.webp',
            label: '雅丹黑',
            stock: 3
        }, {
            cover: '/images/product/detail/white.webp',
            label: '白沙银',
            stock: 3
        },
    ],
    salesTypes: [
        {
            label: '全款购买',
            enabled: false,
        }, {
            label: '75天预约申购',
            enabled: false,
        }, {
            label: '90天预约申购',
            enabled: true,
        }
    ]
}

export default function Page() {
    const id = useSearchParams().get('id')
    const [sku, setSku] = useState({
        price: '',
        title: ''
    })
    const [color, setColor] = useState({
        stock: 0,
        cover: '',
        label: ''
    })
    const [salesType, setSalesType] = useState({
        label: '',
        enabled: false,
    })

    useEffect(() => {
        if (!sku?.price) {
            setSku(product.skus[0])
        }
        if (!color?.label) {
            setColor(product.colors[1])
        }
        if (!salesType?.label) {
            setSalesType(product.salesTypes[2])
        }
    }, [])
    return (
        <div className={"py-10 max-w-7xl mx-auto"}>
            <div className={"flex text-gray-500 items-center gap-x-3"}>
                <Link href={'/'}>首页</Link>
                <FiChevronRight/>
                <Link href={'/product'}>产品</Link>
                <FiChevronRight/>
                <Link href={'#'}>{product.title}</Link>
            </div>
            <div className={"grid grid-cols-12 gap-4 py-6"}>
                <div className={"col-span-12 md:col-span-4"}>
                    <Image width={500} height={500}
                           src={color.cover}
                           alt={''}/>
                </div>
                <div className={"col-span-12 md:col-span-8"}>
                    <div className={"text-2xl"}>{product.title}</div>
                    <div className={"py-2"}>{product.description}</div>
                    <div className={"py-4 px-6 bg-gray-100 text-sm flex flex-col gap-y-3 text-gray-700"}>
                        <div>
                            <span>价&nbsp;&nbsp;&nbsp;&nbsp;格</span> <span
                            className={"text-red-600 font-bold pl-5"}>¥</span><span
                            className={"text-red-600 text-3xl px-2"}>{sku?.price ? sku.price : '????'}</span>
                        </div>
                        <div className={"flex items-center"}>
                            <span>促&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                            <div className={"text-red-600 border border-red-600 ml-5 py-1 px-2 text-xs"}>赠送积分</div>
                            <span className={"px-2"}>购买即赠商城积分，积分可抵现~</span>
                        </div>
                    </div>
                    <Divider className={"my-4"}/>
                    <div className={"text-gray-700 text-sm flex flex-col gap-y-4"}>
                        <div className={"flex items-center"}>
                            <span>服务说明</span>
                            <div className={"px-2 flex items-center"}>
                                <TiInputChecked size={18}/>
                                满48元包邮
                            </div>
                            <div className={"px-2 flex items-center"}>
                                <TiInputChecked size={18}/>
                                由华为终端提供商品、发货开票及售后服务
                            </div>
                        </div>
                        <div className={"flex items-center"}>
                            <span>商品编码</span> <span className={"px-2"}>{product.code}</span>
                        </div>
                    </div>
                    <Divider className={"my-4"}/>
                    <div>
                        <span>选择颜色</span>
                        <div className={"flex items-center gap-x-2"}>
                            {
                                product.colors.map((item, index) =>
                                    <div key={index}
                                         onClick={() => {
                                             setColor(item)
                                         }}
                                         className={clsx("flex items-center gap-x-2 text-sm border hover:border-red-600 py-2 px-6 cursor-pointer", `${item.label === color.label ? 'border-red-600' : ''}`)}>
                                        <Image className={"h-[40px] w-[40px]"} src={item.cover} alt={'cover'}
                                               height={50} width={50}/>
                                        <span>{item.label}</span>
                                    </div>)
                            }
                        </div>

                    </div>
                    <div className={"mt-4"}>
                        <span>选择版本</span>
                        <div className={"flex items-center gap-x-2"}>
                            {
                                product.skus.map((item, index) =>
                                    <div key={index}
                                         onClick={() => {
                                             setSku(item)
                                         }}
                                         className={

                                             clsx("flex items-center gap-x-2 text-sm border hover:border-red-600 py-2 px-6 cursor-pointer", `${item.title === sku.title ? 'border-red-600' : ''}`)}>
                                        <span>{item.title}</span>
                                    </div>)
                            }
                        </div>

                    </div>
                    <div className={"mt-4"}>
                        <span>选择销售类型</span>
                        <div className={"flex items-center gap-x-2"}>
                            {
                                product.salesTypes.map((item, index) =>
                                    <div key={index}
                                         onClick={() => {
                                             setSalesType(item)
                                         }}

                                         className={
                                             clsx("flex items-center gap-x-2 text-sm border hover:border-red-600 py-2 px-6 cursor-pointer",
                                                 `${item.label === salesType.label ? 'border-red-600' : ''}`)}>
                                        <span
                                            className={`${item.enabled ? '' : 'line-through text-gray-300'}`}>{item.label}</span>
                                    </div>)
                            }
                        </div>

                    </div>
                    <div className={"mt-4"}>
                        <span>已选商品</span>
                        <div className={"flex items-center gap-x-2"}>
                            <span className={"text-red-600 text-sm"}>{color.label}/{sku.title}/{salesType.label}</span>
                        </div>
                    </div>
                    <div className={"mt-10 py-4 px-10 flex items-center justify-center bg-[#d6d6d6] text-white"}>
                        暂不售卖
                    </div>
                </div>

            </div>
        </div>
    )
}
